<template>
	<view class="roc-upload-file">
		<!-- #ifdef APP-PLUS -->
		<roc-file ref="rocFile" @up-success="onAppSuccess"></roc-file>
		<!-- #endif -->
		<view class="u-flex" v-if="isDom">
			<view class="u-m-r-20 u-m-b-20" v-for="(item, index) in fileList" :key="index">
				<view class="item-file">
					<view class="u-delete-icon" @click="delfile(index)">
						<u-icon name="close" color="#ffffff" size="20"></u-icon>
					</view>
					<!-- <text class="u-tips-color" v-text="getFileType(item)"></text> -->
					<text class="u-tips-color u-line-1">{{ item | pathSlice }}</text>
				</view>
			</view>
			<view class="u-m-r-20 u-m-b-20" v-if="(fileType == 'many' && fileList.length >= 1) || fileList.length == 0">
				<view class="item-file" @click="onUpload">
					<u-icon name="plus" size="34" color="#606266"></u-icon>
					<view class="select-color">选择文件</view>
				</view>
			</view>
		</view>
		<view ref="input" class="input" style="display: none;"></view>
	</view>
</template>

<script>
import Emitter from '@/uni_modules/uview-ui/libs/util/emitter.js';
import {goUpload, uploadUrl} from '@/api/upload.js'
import RocFile from '../roc-file/roc-file.vue'
export default {
	name: 'roc-upload-file',
	mixins: [Emitter],
	components: {
		RocFile
	},
	props: {
		value:{
			type:Array,
			default() {
				return []
			}
		},
		fileType: {
			type: String,
			// many 多文件 single单文件
			default: 'many'
		},
		//页面展示
		isDom:{
			type:Boolean,
			default:true
		},
		showValue:{
			type:Array,
			default(){
				return []
			}
		}
	},
	watch: {
		fileList:{
			deep:true,
			handler:function(val){
				this.$emit('input', val);
			}
		},
		showValue:{
			immediate:true,
			handler:function(newValue){
				if(newValue.length){
					this.fileList = newValue;
				}
			}
		}
	},
	computed:{
		getFileType(){
			return item=>{
				let url = item.split('.');
				return '.'+url[1];
			}
		}
	},
	data() {
		return {
			fileList: []
		};
	},
	mounted() {
		// #ifdef H5
		const input = document.createElement('input')
		input.type = 'file'
		input.onchange = (event) => {
			goUpload({ file: event.target.files[0] }).then(res=>{
				this.onSuccess(res)
			})
		}
		this.$refs.input.$el.appendChild(input)
		// #endif
	},
	filters: {
		pathSlice(val) {
			if(val.indexOf('/img_test/') == -1) {
				return val
			}else{
				const _index = val.replace('/img_test/', '').indexOf('_')
				return val.replace('/img_test/', '').substring(_index+1)
			}
		}
	},
	methods: {
		/* 上传 */
		onUpload() {
			// #ifdef MP-WEIXIN
				this.wxChooseFile();
			// #endif
			// #ifdef H5
				this.h5ChooseFile()
			// #endif
			// #ifdef APP-PLUS
				const formData = {};
				this.$refs.rocFile.upload({
					// nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
					currentWebview: this.$mp.page.$getAppWebview(),
					//调试时ios有跨域，需要后端开启跨域并且接口地址不要使用http://localhost/
					url: uploadUrl,
					//默认file,上传文件的key
					name: 'file',
					header: {
						'guid':uni.getStorageSync("guid") ? uni.getStorageSync("guid") : ''
					},
					formData: formData
					//...其他参数
				});
			// #endif
		},
		//移除文件
		delfile(index) {
			this.fileList.splice(index,1);
		},
		// #ifdef MP-WEIXIN
			wxChooseFile() {
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: ({tempFiles}) => {
						let [{path:filePath,name:fileName}] = tempFiles;
						goUpload({ filePath: filePath }).then(res=>{
							this.onSuccess(res)
						})
					},
					fail:function(err){
						console.log(err)
					}
				})
			},
		// #endif
		// #ifdef H5
			h5ChooseFile(){
				this.$refs.input.$el.firstChild.click();
			},
		// #endif
		// #ifndef APP-PLUS
			onSuccess(res) {
				console.log(res, "res")
				if(res.code == 1){
					if(this.isDom){
						this.fileList.push(res.data);
					}else{
						this.$emit('success',res.data);
					}
				}else{
					this.$u.toast(res.msg)
				}
				console.log(this.fileList, "=====")
			}
		// #endif
		// #ifdef APP-PLUS
			onAppSuccess(res){
				if(this.$u.test.jsonString(res.data)){
					res = JSON.parse(res.data);
					if(res.code){
						if(this.isDom){
							this.fileList.push(res.data);
						}else{
							this.$emit('success',res.data);
						}
					}
				}else{
					this.$u.toast('上传失败！');
				}
			}
		// #endif
	}
};
</script>

<style lang="scss">
.roc-upload-file {
	width: 100%;
}
.item-file {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	width: 334rpx;
	height: 100rpx;
	border-radius: 10rpx;
	padding: 0 10rpx;
	.select-color {
		font-size: 26rpx;
		color: #606266;
	}
	text {
		font-size: 26rpx;
	}
}
.u-flex {
	display: flex;
	// flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	.u-delete-icon {
		background-color: #fa3534;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
}
</style>
